<script setup>
	import {ref, } from 'vue'
	import './assets/jquery-2.1.1.min.js'
	import './assets/bootstrap.min.js?v=3.4.0'
	//import './assets/jquery.dataTables.js'
	//import './assets/hplus.js?v=2.2.0'
	//import './assets/jquery.metisMenu.js'
	//import './assets/dataTables.bootstrap.js'
	//import './assets/pace.min.js'
	//import './assets/jquery.slimscroll.min.js'

	const privilege=ref(1);
	const privilegename=['超级管理员','普通用户','学生管理员'];
	const username=ref("未登录");
	const page=ref(1);
	const logined=ref(false);
	const data=ref();
	const options=ref({keyword:"",order:0,prefech:true,year:2023});
	const pagename=["信息查询","登陆","信息编辑","批量导入","录入信息"]
	const edit=ref({"id":0,"year":2023,"class":0,"num":0,"name":"未选择","proj_id":"0","proj_name":"未选择","teacher":"为指定","leader":null,"time":"2023-05-23T09:51:41.000Z","valid":0})
	const add=ref({"id":"","year":2023,"class":"","num":"","name":"","proj_id":"","proj_name":"","teacher":"","leader":null,"time":"2023-05-23T09:51:41.000Z","valid":0})
	const editing=ref(false);
	const url="http://127.0.0.1:3000";

	


	function logout(){
		console.log("df")
		fetch(url+'/logout',{
				method: "post"
			})
			.then(function(data) {
				return data.text();
			})
			.then(function(data){
				console.log(data);
				privilege.value=1;
				username.value="未登录";
				logined.value=false;
				options.value={keyword:"",order:0,prefech:true,year:"2023"};
				edit.value={"id":0,"year":2023,"class":0,"num":0,"name":"未选择","proj_id":"0","proj_name":"未选择","teacher":"为指定","leader":null,"time":"2023-05-23T09:51:41.000Z","valid":0};
				add.value={"id":"","year":2023,"class":"","num":"","name":"","proj_id":"","proj_name":"","teacher":"","leader":null,"time":"2023-05-23T09:51:41.000Z","valid":0};
				//document.getElementById('mima').value="";
				//document.getElementById("yonghumin").value="";

				getdata();
			})
			.catch(error =>{
					alert(error+" ，请记录错误并请联系管理员，谢谢");
				})
		}
	function login(){//umae & usernane小心重载！！
		fetch(url+'/login', {
					method: 'post',
					body: JSON.stringify({
						uname: document.getElementById('yonghumin').value,
						pwd: document.getElementById('mima').value
					}),
					headers: {
						'Content-Type': 'application/json'
					}
				})
				.then(function(data) {
					return data.text();
					//return response;
				}).then(function(data) {
					//console.log(data);
					var thing=JSON.parse(data)
					if(thing.privilege==1){
						alert("用户名或密码错误")
					}
					else{
						username.value=thing.username
						//username.value="thing.username"
						//console.log(username.value);
						privilege.value=thing.privilege;
						logined.value=true;
						
						document.getElementById('yonghumin').value="";
						document.getElementById('mima').value=""
						page.value=0
					}

				})
				.catch(error =>{
					alert(error+" ，请记录错误并请联系管理员，谢谢");
				})
		
	}

	function editdata(xinxi){
		//console.log(JSON.stringify(xinxi))
		editing.value=true
		edit.value=xinxi
		page.value=2;
	}
	function deletedata(delete_id){
		 //console.log("shit")
		fetch(url+'/delete', {
					method: 'post',
					body: JSON.stringify({
						key:delete_id,
					}),
					headers: {
						'Content-Type': 'application/json'
					},

					credentials: 'include',
					mode:"cors"



				})
				.then(function(e) {
					return e.text();
					//return response;
				}).then(function(e) {
					//console.log(data);
					var thing=JSON.parse(e)
					
					console.log(thing);

				})
				.catch(error =>{
					alert(error+" ，请记录错误并请联系管理员，谢谢");
				})
		getdata()
	}
	function getdata(){//umae & usernane小心重载！！
	console.log("starting fech...")
	console.log(options.value)
		fetch(url+'/find', {
					method: 'post',
					body: JSON.stringify({
						keyword: options.value.keyword,
						order: options.value.order,
						prefech: options.value.prefech,
						year: options.value.year
					}),
					headers: {
						'Content-Type': 'application/json'
					}
				})
				.then(function(e) {
					return e.text();
					//return response;
				}).then(function(e) {
					//console.log(data);
					//console.log(e)
					var thing=JSON.parse(e)
					
					//console.log(thing);
					//console.log("给我模糊查询！！！");
					data.value=thing;
				})
				.catch(error =>{
					alert(error+" ，请记录错误并请联系管理员，谢谢");
				})
	}
	getdata()
	//options.value.prefech=false;
	function updatadata(){
		fetch(url+'/insert', {
					method: 'post',
					body: JSON.stringify({
						id: edit.value.id,
						year: edit.value.year,
						class: edit.value.class,
						num: edit.value.num,
						name: edit.value.name,
						proj_id: edit.value.proj_id,
						proj_name: edit.value.proj_name,
						teacher: edit.value.teacher,
						leader: edit.value.leader,
						
					}),
					headers: {
						'Content-Type': 'application/json'
					}
				})
				.then(function(e) {
					return e.text();
					//return response;
				}).then(function(e) {
					//console.log(data);
					//console.log(e)
					var thing=JSON.parse(e)
					
					//console.log(thing);
					//console.log("haarayy!");
				})
				.catch(error =>{
					alert(error+" ，请记录错误并请联系管理员，谢谢");
				})
		editing.value=false;
		page.value=0
		getdata()
	}
	function uploaddata(){
		fetch(url+'/add', {
					method: 'post',
					body: JSON.stringify({
						id: add.value.id,
						year: add.value.year,
						class: add.value.class,
						num: add.value.num,
						name: add.value.name,
						proj_id: add.value.proj_id,
						proj_name: add.value.proj_name,
						teacher: add.value.teacher,
						leader: add.value.leader,
						
					}),
					headers: {
						'Content-Type': 'application/json'
					}
				})
				.then(function(e) {
					if(e.ok){
						return e.text();
					}
					else{
						alert("服务器宕机或配置错误");
					}
					//return response;
				}).then(function(e) {
					//console.log(data);
					//console.log(e)
					//var thing=JSON.parse(e)
					
					//console.log(thing);
					//console.log("haarayy2!");
				})
				.catch(error =>{
					alert(error+" ，请记录错误并请联系管理员，谢谢");
				})
		add.value={"id":"","year":2023,"class":"","num":"","name":"","proj_id":"","proj_name":"","teacher":"","leader":null,"time":"2023-05-23T09:51:41.000Z","valid":0}
	}







		//watch(data,(newdata)=>{
		//	$('.dataTables-example').dataTable();
		//})




</script>


<template>
	<div class="html body">
		<div id="wrapper">
			<nav class="navbar-default navbar-static-side" role="navigation">
				<div class="sidebar-collapse">
					<ul class="nav" id="side-menu">
						<li class="nav-header">

							<div class="dropdown profile-element"> <span>
								<!--<img alt="image" class="img-circle" src="img/profile_small.jpg" />-->
								
								</span>
								<a data-toggle="dropdown" class="dropdown-toggle" href="index.html#">
									<span class="clear"> <span class="block m-t-xs"> <strong class="font-bold">{{username}}</strong>
								</span>  <span class="text-muted text-xs block">{{privilegename[privilege]}} <b class="caret"></b></span> </span>
								</a>
								<ul class="dropdown-menu animated fadeInRight m-t-xs" v-if="logined" @click="logout()">
									<li><a>退出登陆</a>
									</li>
								</ul>
							</div>
							<div class="logo-element">
								H+
							</div>

						</li>

						<li class="active">
							<a href="index.html#"><span class="nav-label">课题信息管理</span></a>
							<ul class="nav nav-second-level">
								<li class="active" v-if="page==0"><a>信息查询</a></li>
								<li v-else><a @click="page=0;getdata()">信息查询</a></li>
								
								<li class="active" v-if="page==2&editing"><a>信息编辑</a></li>
								<li v-else-if="editing"><a @click="page=2">信息编辑</a></li>

								<!--
								<li class="active" v-if="page==3"><a>批量导入</a></li>
								<li v-else><a @click="page=3">批量导入</a></li>
								-->

								<li class="active" v-if="page==1&!logined"><a>登陆</a></li>
								<li v-else-if="!logined"><a @click="page=1">登陆</a></li>


								<li class="active" v-if="page==4&logined"><a>录入信息</a></li>
								<li v-else-if="logined"><a @click="page=4">录入信息</a></li>


							</ul>
						</li>
						
					</ul>

				</div>
			</nav>




			<div id="page-wrapper" class="gray-bg dashbard-1">
				
				<div class="row wrapper border-bottom white-bg page-heading">
					<div class="col-lg-10">
						<h2 id="top_banner">欢迎使用届西南位育课题信息管理系统</h2>
						<ol class="breadcrumb">
							<li>
								<a>课题信息管理</a>
							</li>
							<li>
								<strong>{{pagename[page]}}</strong>
							</li>
						</ol>
					</div>
					<div class="col-lg-2">

					</div>
				</div>
				<div class="wrapper wrapper-content animated fadeInRight" v-if="page==0">
					<div class="row">
						<div class="col-lg-12">
							<div class="ibox float-e-margins">
								<div class="ibox-title">
									<h5>信息查询  <small>默认显示最新20条数据</small><div type="text"></div></h5>
								</div>
								
								<div class="ibox-content">
									<div class="form-horizontal">
										<div class="form-vertical">
											<div class="form-group">
												<label class="col-sm-2 control-label">届</label>
												<div class="col-sm-10">
													<select v-model="options.year">
														<!--<option value="4">届</option>-->
														<option value="2022">2022</option>
														<option value="2023">2023</option>
													</select>
													<label class="control-label">检索字段</label>
													<select v-model="options.order">
														<!--<option value="4">届</option>-->
														<option value="0">id</option>
														<option value="1">班级</option>
														<option value="2">学号</option>
														<option value="3">姓名</option>

													</select>
												</div>

												


											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-2 control-label">查询内容</label>
											<div class="col-sm-10">
												<input v-model="options.keyword"  @change="options.prefech=false">
											</div>
											
										</div>
										
										<div class="form-group">
											<div class="col-sm-4 col-sm-offset-2">
												<button class="btn btn-primary" @click="getdata">查询</button>
											</div>
										</div>
									</div>
									<table class="table table-striped table-bordered table-hover dataTables-example">
										<thead>
											<tr>
												<th>ID</th>
												<th>班级</th>
												<th>学号</th>
												<th>姓名</th>
												<th>课题编号</th>
												<th>课题名称</th>
												<th>辅导老师</th>
												<th>是否组长</th>
												<th v-if="privilege==0">操作</th>
												
											</tr>
										</thead>
										<tbody v-for="xinxi in data" v-if="privilege!=0">
											<tr>
												<td>{{ xinxi.id }}</td>
												<td>{{ xinxi.class }}</td>
												<td>{{ xinxi.num }}</td>
												<td>{{ xinxi.name }}</td>
												<td>{{ xinxi.proj_id }}</td>
												<td>{{ xinxi.proj_name }}</td>
												<td>{{ xinxi.teacher }}</td>
												<td>{{ xinxi.leader }}</td>
											</tr>
											
										</tbody>
										<tbody v-for="xinxi in data" v-else>
											<tr>
												<td>{{ xinxi.id }}</td>
												<td>{{ xinxi.class }}</td>
												<td>{{ xinxi.num }}</td>
												<td>{{ xinxi.name }}</td>
												<td>{{ xinxi.proj_id }}</td>
												<td>{{ xinxi.proj_name }}</td>
												<td>{{ xinxi.teacher }}</td>
												<td>{{ xinxi.leader }}</td>
												<td @click="editdata(xinxi)" class="btn">修改</td>
												
												<td @click="deletedata(xinxi.id)" class="btn">删除</td>
											</tr>
											
										</tbody>
										<tfoot>
											<tr>
												<th>ID</th>
												<th>班级</th>
												<th>学号</th>
												<th>姓名</th>
												<th>课题编号</th>
												<th>课题名称</th>
												<th>辅导老师</th>
												<th>是否组长</th>
												<th v-if="privilege==0">操作</th>
												
											</tr>
										</tfoot>
									</table>

								</div>
							</div>
						</div>
					</div>

				</div>

				<!-- maybe another element?-->

				<div class="m-t" role="form" v-if="page==1">
					<div class="form-group">
						<input type="username" class="form-control" placeholder="用户名" required="" id="yonghumin">
					</div>
					<div class="form-group">
						<input type="password" class="form-control" placeholder="密码" required="" id="mima">
					</div>
					<button class="btn btn-primary block full-width m-b" @click="login()">登 录</button>



				</div>
				<!-- maybe another element?-->
				<!-- maybe another element?-->
				<!-- maybe another element?-->
				<!-- maybe another element?-->
				<!-- maybe another element?-->
				<!-- maybe another element?-->
				<!-- maybe another element?-->

				<div class="wrapper wrapper-content animated fadeInRight" v-if="page==2">
					<div class="row animated fadeInRight" >
						<div class="col-lg-12">
							<div class="ibox float-e-margins">
								<div class="ibox-title">
									<h5>请修改表单数据 <small>对需要修改的信息进行更新</small></h5>
								</div>
								<div class="ibox-content">
									<div class="form-horizontal">
										
										<div class="form-group">
											<label class="col-sm-2 control-label">学生信息</label>

											<div class="col-sm-10">
												{{ edit.class }}班{{ edit.num }}号{{ edit.name }}
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-2 control-label">课题编号</label>

											<div class="col-sm-10">
												<input type="text" class="form-control" v-model="edit.proj_id">
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-2 control-label">课题名称</label>

											<div class="col-sm-10">
												<input type="text" class="form-control" v-model="edit.proj_name">
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-2 control-label">辅导老师</label>

											<div class="col-sm-10">
												<input type="text" class="form-control" v-model="edit.teacher">
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-2 control-label" id="">是否组长</label>

											<div class="col-sm-10">
												<select class="form-control" v-model="edit.leader">
													<option value="是">是</option>
													<option value="否">否</option>
												</select>
											</div>
										</div>
										
										
										<div class="form-group">
											<div class="col-sm-4 col-sm-offset-2">
												<button class="btn btn-primary" @click="updatadata()">保存修改</button>
											</div>
										</div>

									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- maybe another element?-->
				<!-- maybe another element?-->
				<!-- maybe another element?-->
				<div class="wrapper wrapper-content animated fadeInRight" v-if="page==4">
					<div class="row animated fadeInRight" >
						<div class="col-lg-12">
							<div class="ibox float-e-margins">
								<div class="ibox-title">
									<h5>插入数据 <small>插入新的课题信息</small></h5>
								</div>
								<div class="ibox-content">
									<div class="form-horizontal">
										
										<div class="form-group">
											<label class="col-sm-2 control-label">届</label>

											<div class="col-sm-10">
												<select class="form-control" v-model="add.year">
													<option value=2023>2023</option>
													<option value=2022>2022</option>
												</select>
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-2 control-label">班级</label>

											<div class="col-sm-10">
												<input type="number" class="form-control" v-model="add.class">
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-2 control-label">学号</label>

											<div class="col-sm-10">
												<input type="number" class="form-control" v-model="add.num">
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-2 control-label">姓名</label>

											<div class="col-sm-10">
												<input type="text" class="form-control" v-model="add.name">
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-2 control-label">课题编号</label>

											<div class="col-sm-10">
												<input type="text" class="form-control" v-model="add.proj_id">
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-2 control-label">课题名称</label>

											<div class="col-sm-10">
												<input type="text" class="form-control" v-model="add.proj_name">
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-2 control-label">辅导老师</label>

											<div class="col-sm-10">
												<input type="text" class="form-control" v-model="add.teacher">
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-2 control-label">是否组长</label>

											<div class="col-sm-10">
												<select class="form-control" v-model="add.leader">
													<option value="是">是</option>
													<option value="否">否</option>
												</select>
											</div>
										</div>
										
										
										<div class="form-group">
											<div class="col-sm-4 col-sm-offset-2">
												<button class="btn btn-primary" @click="uploaddata()">保存修改</button>
											</div>
										</div>

									</div>
								</div>
							</div>
						</div>
					</div>
				</div>







				<!-- maybe another element?-->
				<!-- maybe another element?-->
				<!-- maybe another element?-->
				<!-- maybe another element?-->






				<div class="footer">
					<div class="pull-right">
						By：<a href="https://xnwy.xhedu.sh.cn/cms/">xnwy_wrq</a>
					</div>
					<div>
						<strong>Copyright</strong> wrq &copy; 2023
					</div>
				</div>
				<div id="excel"></div>
			</div>
		</div>
	</div>
  

</template>
<style src="./assets/bootstrap.min.css?v=3.4.0" scoped></style>
<style src="./assets/font-awesome.css?v=4.3.0" scoped></style>
<style src="./assets/dataTables.bootstrap.css" scoped></style>
<style src="./assets/animate.css" scoped></style>
<style src="./assets/style.css?v=2.2.0" scoped></style>



<style scoped>



</style>

